* {
    margin: 0;
    padding: 0;
    list-style: none;
}

@function rem ($n) {
    @return $n/75*2rem
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #FFFFFF;
}

input:focus {
    outline: none;
}

header {
    width: 100vw;
    height: rem(100);
    line-height: rem(100);
    // background-color: blue;
    display: flex;

    span {
        display: inline-block;
        width: rem(100);
        height: rem(100);
        text-align: center;
        line-height: rem(100);
        font-size: rem(60);
        // float: left;
    }

    p {
        display: inline-block;
        flex: 1;
        text-align: center;
        text-indent: rem(-110);
    }
}

main {
    width: 100vw;
    flex: 1;
    overflow: auto;
    text-align: center;
    display: flex;
    justify-content: center;

    section {
        width: 90vw;
        // background-color: aqua;

        .user_input {
            margin-top: rem(30);
            height: rem(150);

            >p {
                span {
                    display: inline-block;
                    height: rem(100);
                    width: rem(100);
                    line-height: rem(100);
                }

                width: 93%;
                height: rem(100);
                padding: rem(10);
                outline: none;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid rgba(170, 170, 170, 0.478);

                input {
                    width: 100%;
                    flex: 1;
                    height: rem(60);
                    border: 0;
                    font-size: rem(38);
                    color: #B2B2B2;
                    appearance: none;
                }
            }
        }

        .user_input2 {
            margin-top: rem(30);
            height: rem(150);

            >p {

                width: 93%;
                height: rem(100);
                padding: rem(10);
                outline: none;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid rgba(205, 205, 205, 0.478);

                input {
                    width: 100%;
                    flex: 1;
                    height: rem(60);
                    border: 0;
                    font-size: rem(38);
                    color: #B2B2B2;
                    border-right: 1px solid rgba(197, 197, 197, 0.478);
                    appearance: none;
                }

                button {
                    border: 0;
                    background-color: #FFFFFF;
                    width: rem(250);
                    color: rgb(120, 120, 120);
                }
            }
        }

        .register {
            background-color: red;
            border-radius: rem(50);
            height: rem(100);
            opacity: 0.3;
            margin-top: rem(50);


            button {
                border: 0;
                background-color: red;
                border-radius: rem(80);
                height: rem(120);
                width: 100%;
                color: #FFFFFF;
                font-size: rem(40);
            }
        }

        .choice {
            margin-top: rem(50);
            display: flex;
            justify-content: space-between;

            p {
                display: inline-block;
                font-size: rem(30);
                margin: 0 rem(25);
                color: rgb(120, 120, 120);
            }
        }

        .hr {
            width: 100%;
            margin-top: rem(200);

            p {
                color: rgb(193, 193, 193);
                font-size: rem(25);
            }

        }

        .other {
            display: flex;
            justify-content: center;
            width: 100%;
            height: rem(100);
            margin-top: rem(50);

            span {
                font-size: rem(100);
                display: inline-block;
                // width: rem(100);
                height: rem(100);
                margin: 0 rem(50);
            }

            .icon-QQ {
                color: rgb(182, 204, 225);
            }

            .icon-weixin {
                color: rgb(0, 167, 0);
            }
        }

        .accept {
            margin-top: rem(50);

            p {
                width: 90%;
                display: inline-block;
                font-size: rem(30);
                color: #b2b2b2c4;

                a {
                    color: #4A90E2;
                }
            }
        }
    }
}

// footer {
//     width: 100vw;
//     height: rem(100);
//     background-color: pink;
// }